<template>
    <button>
        <div>
            <span>
                <p>Contact me</p>
                <p>: )</p>
            </span>
        </div>
        <div>
            <span>
                <p>15156090303</p>
                <p>: wx</p>
            </span>
        </div>
    </button>
</template>

<script setup lang="ts">

</script>

<style scoped>
    button {
        outline: 0;
        border: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 200px;
        height: 50px;
        border-radius: 0.5em;
        box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35);
        overflow: hidden;
        cursor: pointer;
    }

    button div {
        transform: translateY(0px);
        width: 100%;
    }

    button,
    button div {
        transition: 0.6s cubic-bezier(.16, 1, .3, 1);
    }

    button div span {
        display: flex;
        justify-content: space-between;
        height: 50px;
        line-height: 50px;
        padding: 0px 1.125em;
    }

    button div:nth-child(1) {
        background-color: #1e90ff;
    }

    button div:nth-child(2) {
        background-color: #21dc62;
    }

    button:hover {
        box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35);
    }

    button:hover div {
        transform: translateY(-50px);
    }

    button p {
        font-size: 17px;
        font-weight: bold;
        color: #ffffff;
    }

    button:active {
        transform: scale(0.95);
    }
</style>